/**
 * By Alpha
 * Author: alixez <alixe.z@foxmail.com>
 * Date: 2017/10/28
 */

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Spin } from 'antd';
import styles from './weather.less';

export default class Weather extends Component {

  static propTypes = {
    city: PropTypes.string,
    icon: PropTypes.string,
    dateTime: PropTypes.string,
    temperature: PropTypes.string,
    name: PropTypes.string,
    loading: PropTypes.bool,
  };

  constructor (props) {
    super(props);
    this.state = {};
  }

  render () {
    const { city, icon, dateTime, temperature, name, loading } = this.props;

    return (
      <Spin spinning={loading}>
        <div className={styles.weather}>
          <div className={styles.left}>
            <div className={styles.icon}
              style={{
                backgroundImage: `url(${icon})`,
              }}
            />
            <p>{name}</p>
          </div>
          <div className={styles.right}>
            <h1 className={styles.temperature}>{`${temperature}°`}</h1>
            <p className={styles.description}>{city},{dateTime}</p>
          </div>
        </div>
      </Spin>);
  }
}
